<template>
  <!-- <ui-container> -->
    <!-- <div slot="header">header</div> -->
    <div class="detailContain">
        <div class="bgImg" :style="allContain">
          <nav-tab class="absoluteNav"></nav-tab>
        </div>
        <!-- 搜索 -->
        <div class="search">
          <el-row :gutter="20">
            <el-col :span="18">
              <div>
                <el-input placeholder="请输入内容" v-model="searchRequirement" class="input-with-select">
<!--                  <el-select v-model="select" slot="prepend" placeholder="请选择">-->
<!--                    <el-option label="餐厅名" value="1"></el-option>-->
<!--                    <el-option label="订单号" value="2"></el-option>-->
<!--                    <el-option label="用户电话" value="3"></el-option>-->
<!--                  </el-select>-->
                </el-input>
              </div>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="searchRequirementContent">搜索</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-row>
                <el-col :span="3" class="spanClass" v-for="hotkeyItem in requirementHotkey" :key="hotkeyItem" @click="clickRequirementHotKey(hotkeyItem)">{{hotkeyItem}}</el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <!-- tab -->
        <div class="tabNav borderBottom">
            <template class="tabWidth">
                <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
                    <el-tab-pane label="全部" name="first">
                        <el-row class="programList" :gutter="20">
                            <el-col :span="8" class="singleProgram" v-for="companyArrItem in companyArr" :key="companyArrItem.corpId">
                                <el-row class="bgWhite" @click.native="test">
                                <el-col :span="24">
                                    <el-row class="outTime boderBottom">
                                        <el-col :span="12"> <i class="el-icon-time"></i> 发布时间：{{companyArrItem.publishTime}}</el-col>
                                        <el-col :span="12" class="textRight">项目地址：{{companyArrItem.corpName}}<i class="el-icon-location-outline"></i></el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="24" class="companyTitle">
                                    {{companyArrItem.corpName}}
                                </el-col>
                                <el-col :span="24" class="companyContent">
                                    {{companyArrItem.summary}}
                                </el-col>
                                <el-col :span="24" class="companyBtn">
                                     <el-tag size="mini" v-for="(btnItem,index) in companyArrItem.tags" v-if="index==0" :key="btnItem" v-show="btnItem" color="#00c1de" class="colorWhite">{{btnItem}}</el-tag>
                                    <el-tag size="mini" v-for="(btnItem,index) in companyArrItem.tags" v-if="index==1" :key="btnItem" v-show="btnItem" color="#6fbc85" class="colorWhite">{{btnItem}}</el-tag>
                                    <el-tag size="mini" v-for="(btnItem,index) in companyArrItem.tags" v-if="index==2" :key="btnItem" v-show="btnItem" color="#deb85e" class="colorWhite">{{btnItem}}</el-tag>
                                </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="企业发布" name="second">
                      <el-row class="programList" :gutter="20">
                            <el-col :span="8" class="singleProgram" v-for="companyArrItem in companyArr" :key="companyArrItem.corpId" v-if="companyArrItem.ctype==2">
                                <el-row class="bgWhite" @click.native="test">
                                <el-col :span="24">
                                    <el-row class="outTime boderBottom">
                                        <el-col :span="12"> <i class="el-icon-time"></i> 发布时间：{{companyArrItem.publishTime}}</el-col>
                                        <el-col :span="12" class="textRight">项目地址：{{companyArrItem.corpName}}<i class="el-icon-location-outline"></i></el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="24" class="companyTitle">
                                    {{companyArrItem.corpName}}
                                </el-col>
                                <el-col :span="24" class="companyContent">
                                    {{companyArrItem.summary}}
                                </el-col>
                                <el-col :span="24" class="companyBtn">
                                    <el-button type="success" size="mini"  v-for="(btnItem,index) in companyArrItem.tags" v-show="btnItem" v-if="index==0" :key="btnItem">{{btnItem}}</el-button>
                                    <el-button type="primary" size="mini"  v-for="(btnItem,index) in companyArrItem.tags" v-show="btnItem" v-if="index==1" :key="btnItem">{{btnItem}}</el-button>
                                    <el-button type="warning" size="mini"  v-for="(btnItem,index) in companyArrItem.tags" v-show="btnItem" v-if="index==2" :key="btnItem">{{btnItem}}</el-button>
                                    <el-button type="danger" size="mini"  v-for="(btnItem,index) in companyArrItem.tags" v-show="btnItem" v-if="index==3" :key="btnItem">{{btnItem}}</el-button>
                                </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="平台挖掘" name="third">
                      <el-row class="programList" :gutter="20">
                            <el-col :span="8" class="singleProgram" v-for="companyArrItem in companyArr" :key="companyArrItem.corpId" v-if="companyArrItem.ctype==1">
                                <el-row class="bgWhite" @click.native="test">
                                <el-col :span="24">
                                    <el-row class="outTime boderBottom">
                                        <el-col :span="12"> <i class="el-icon-time"></i> 发布时间：{{companyArrItem.publishTime}}</el-col>
                                        <el-col :span="12" class="textRight">项目地址：{{companyArrItem.address}}<i class="el-icon-location-outline"></i></el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="24" class="companyTitle">
                                    {{companyArrItem.title}}
                                </el-col>
                                <el-col :span="24" class="companyContent">
                                    {{companyArrItem.summary}}
                                </el-col>
                                <el-col :span="24" class="companyBtn">
                                    <el-button type="success" size="mini"  v-for="(btnItem,index) in companyArrItem.tags" v-show="btnItem" v-if="index==0" :key="btnItem">{{btnItem}}</el-button>
                                    <el-button type="primary" size="mini"  v-for="(btnItem,index) in companyArrItem.tags" v-show="btnItem" v-if="index==1" :key="btnItem">{{btnItem}}</el-button>
                                    <el-button type="warning" size="mini"  v-for="(btnItem,index) in companyArrItem.tags" v-show="btnItem" v-if="index==2" :key="btnItem">{{btnItem}}</el-button>
                                    <el-button type="danger" size="mini"  v-for="(btnItem,index) in companyArrItem.tags" v-show="btnItem" v-if="index==3" :key="btnItem">{{btnItem}}</el-button>
                                </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </template>
        </div>
    </div>
  <!-- </ui-container> -->
</template>
<script type="text/javascript">
import NavTab from '../../layout/default/components/nav'
import Pages from '../../layout/default/components/pages'
export default {
  data() {
    return {
      searchRequirement: "",//选择内容
      select: "",
      activeName: 'first',
      companyArr:[],//企业信息
      requirementHotkey:[],//热搜
      allContain: {
        backgroundImage: "url(" + require("../../assets/images/squareBanner.png") + ")",
      }
    };
  },
  mounted(){
        this.initApiContentRequirement(); //成功案例
        this.initRequirementHotkey();//成功案例页面-热词
    },
    methods:{
        warrapParams() {
          return  {hotkey: this.searchRequirement};
        },
        clickRequirementHotKey(hotkey){
          console.log(hotkey);
          this.searchRequirement = hotkey;
          this.searchRequirementContent();
        },
        async searchRequirementContent(){
          var params = this.warrapParams();
          this.initApiContentRequirement(params);
        },
        async initApiContentRequirement(params) {
        const { $confirm, $api, $message, $router, setUserInfo } = this;
            const data = await $api.user.apiContentCequirement(params);
            if(data.code==0){
                this.companyArr = data.data
            }else{
                this.$message.error(data.msg);
            }
        },
        async initRequirementHotkey() {
            const { $confirm, $api, $message, $router, setUserInfo } = this;
            const data = await $api.user.apiContentRequirementHotkey();
            if(data.code==0){
                this.requirementHotkey = data.data
            }else{
                this.$message.error(data.msg);
            }
        },
        handleClick(tab, event) {
        console.log(tab, event);
      },
      test(){
        this.$router.push({ name: 'Detail' })
    },
    },
  name: "Squares",
  components:{
    NavTab,
    Pages
  },
  created() {}
};
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss">
.singleProgram{
    cursor: pointer;
}
.reaPay{
  color: #999999;
}
.active{
    border-top: 2px solid #138782;
    // color: #138782 !important;
}
.real{
  margin: 0 15px;
  line-height: 45px;
}
.outTime{
  margin:0 15px;
  font-size: 13px;
  line-height: 40px;
  color: #cacaca;
}
.reaPrice{
    font-size: 20px;
    color: #d2a741;
}
.programTitle{
  margin-bottom: 20px;
}
.companyContent{
  padding: 0 15px;
  color: #666666;
  line-height: 20px;
  font-size: 14px;
}
.imgContain{
  width: 100%;
  height:187px;
  padding: 10px;
  background-size: contain;
  img{
    width: 100%;
    height: 100%
  }
}
.companyTitle{
  background: #fff;
}
.companyTitle{
  padding: 0 15px;
  color: #333333;
  line-height: 40px;
  font-size: 16px;
}
.companyBtn{
  padding: 0 15px;
  margin: 10px 0;
}
.size20{
  width: 40px !important;
  height: 40px !important;
}
.companyBorder{
  padding: 0 15px;
  padding-top: 10px;
  border-top: 1px solid #cccccc;
  font-size: 13px;
  color: #cccccc;
}
.el-tabs__nav,
.is-stretch{
        min-width: 50% !important;
        transform: translateX(50%) !important;
}
.tabWidth{
    width: 300px;
    margin: 100px auto;
}
.tabNav{
    width: 1200px;
    margin: 40px auto;
}
.spanClass{
  font-size: 13px;
//   color: #fff;
  text-align: center;
  margin-top: 13px;
  cursor: pointer;
  border-right: 1px solid #cccccc;
}
.spanClass:nth-last-of-type(1){
  border-right: 0;
}
.search{
  width: 750px;
  margin: 0 auto;
  margin-top: 35px;
}
nav{
    padding: 0 20px;
}
.lineHeight57 {
    color: #c5c4c4;
    margin-right: 60px;
  }
.detailContain {
  width: 100%;
  background-size: contain;
  position: relative;
  .bgImg{
    width: 100%;
    height: 326px;
    background-size: cover;
  }
  .containAll{
    position: absolute;
    top: 40px;
    width: 1200px;
    z-index: 2;
    left: 50%;
    // background: #ffffff;
    transform: translate(-50%,0);
    .showAll{
      position: relative !important;
      .contentTitle{
        background-size: cover;
        margin-top: 40px;
        background: url('../../assets/images/detaiLine.png') repeat-y;
        line-height: 50px;
        padding: 0 35px;
        font-size: 20px;
        color: #f2f2f2;
      }
    }
  }
}
</style>
